<template>
  <view class="container">
    <MenuHeader @setOrderType="setOrderType"></MenuHeader>
    <VerticalClassifyList @handleAddToCartInModal="handleAddToCartInModal"></VerticalClassifyList>
    <!-- 购物车栏 begin -->
    <CartBox @openCartPopup="openCartPopup" @toPay="toPay"></CartBox>
    <!-- 购物车栏 end -->

    <!-- 购物车详情popup -->
    <CartDetail @closeCartPopup="cartPopupVisible=false"
                :cartPopupVisible="cartPopupVisible"
                :orderType="orderType"></CartDetail>
    <!-- 购物车详情popup -->
  </view>
</template>
<script lang="ts" setup>
import {
  reactive,
  toRefs,
  ref,
  onMounted,
  defineComponent,
  nextTick,
  computed,
} from "vue";
import { listClassify } from "@/api/classify";
import { listProduct } from "@/api/product";
import MenuHeader from "./component/MenuHeader.vue";
import CartBox from "./component/CartBox.vue";
import CartDetail from "./component/CartDetail.vue";
import VerticalClassifyList from "./component/VerticalClassifyList.vue";

const cartPopupVisible = ref(false);
const cart = ref([{ id: 1 }]);
const setOrderType = (type: string) => {
  orderType.value = type;
};
const openCartPopup = () => {
  cartPopupVisible.value = true;
  console.log("cartPopupVisible", cartPopupVisible);
};
//计算单个饮品添加到购物车的数量
const goodCartNum = computed(() => {
  return (id: string) =>
    cart.value.reduce((acc, cur) => {
      if (cur.id === id) {
        return (acc += cur.number);
      }
      return acc;
    }, 0);
});
const menuCartNum = computed(() => {
  return (id: string) =>
    cart.value.reduce((acc, cur) => {
      if (cur.cate_id === id) {
        return (acc += cur.number);
      }
      return acc;
    }, 0);
});
//计算购物车总数
const getCartGoodsNumber = computed(() => {
  return 0;
  //return cart.reduce((acc, cur) => acc + cur.number, 0)
});
const getCartGoodsPrice = computed(() => {
  return 0;
  //计算购物车总价
  //return cart.reduce((acc, cur) => acc + cur.number * cur.price, 0)
});
const disabledPay = computed(() => {
  return 0;
  //return orderType == 'takeout' && (getCartGoodsPrice < this.store.min_price) ? true : false
}); //是否达到起送价

const spread = computed(() => {
  return 0;
  //差多少元起送
  if (orderType != "takeout") return;
  //return parseFloat((this.store.min_price - this.getCartGoodsPrice).toFixed(2))
});


const orderType = ref("takein");
const tabbar = ref([]);


const showGoodDetailModal = (item: any, good: { value: any }) => {
  good.value = JSON.parse(JSON.stringify({ ...good, number: 1 }));
  //category.value = JSON.parse(JSON.stringify(item))
  goodDetailModalVisible.value = true;
};


const changePropertyDefault = (index, key) => {
  //改变默认属性值
  good.property[index].values.forEach((value) =>
    this.$set(value, "is_default", 0),
  );
  good.property[index].values[key].is_default = 1;
  good.number = 1;
};

const toPay = () => {
  uni.navigateTo({
    url: "/pages/pay/pay",
  });
};
</script>
<style lang="scss" scoped>
.container {
  height: calc(100vh);
  /* #ifdef H5 */
  height: calc(100vh - var(--window-top));
  /* #endif */
  display: flex;
  flex-direction: column;
}
</style>
